為什麼要學 localStorage，原因大概如下面所說一樣：

將資料從頁面中的程式碼儲存到 Web瀏覽器的儲存空間當中。如此一來，本來存入程式碼當中的資料，就不會因重新整理頁面或者關閉瀏覽器而消失

最近想要好好串接個 api，針對喜歡的文章果想要收藏要怎麼辦？
雖然之前有做個，但有些部分感覺不是很清楚，我對於事情是否很清楚的理解為，你是否能夠自己說明，最近最大的學習障礙就是有時知道原理，但就是做不到ＸＤ。

定義：

localStorage ：可以跨瀏覽器分頁做使用、使用者關掉分頁或瀏覽器再打開資料仍不會消失，且資料無期效限制，資料將永久被保留。

在做之前你必須要懂的事：

我想要做個todolist 之前

loaclStorage / 事件監聽 / Dom / JSON parse() / JSON stringify()

如何操作

1.如何存值到 localStorage

**setItem() **

localStorage.setItem(key, value)

透過在 setItem() 方法中指定物件屬性的 key 以及 value ，
我們可以在 storage 物件中加入屬性或修改原本的屬性內容。

setItem() 存入資料 — key 值是 myname； value 是 tom ：

在 DevTools Application 中查看 local storage
 框起來的 tom

var name = "Tom";
localStorage.setItem("myname",name);

範例:https://codepen.io/chiakilalala/pen/zYGOLbO

2.如何撈值到 localStorage

取出資料：getItem()

localStorage.getItem(key)

透過在 getItem() 方法中輸入屬性的 key ，我們可以得到 storage 物件對應的屬性 value 。
getItem

console.log(localStorage.getItem("myname");)

console.log 出現 Tom

3.移除資料：removeItem()

透過在 removeItem() 方法，我們可以把指定的屬性從 storage 物件中移除。

//清空localStorage

localStorage.removeItem(key)

localStorage.clear()  // undefined   
localStorage      //清除全部資料 Storage {length: 0} 儲存資料

案例基本操作

利用 localstorage 呼叫和操作 ，點擊按鈕存入網路儲存空間，然後

先試著用一個輸入鍵，把值存入 localstorage 使用 setItem（）存入資料 即使用 getItem 取出資料

畫面如下：

let btn = document.querySelector('.btnClass');

function savename(e){
  // 撈出輸入鍵的值
let text =document.querySelector('.textClass').value;
  // 存在Localstoreage
   localStorage.setItem('mylove', text);

}
btn.addEventListener('click',savename);

再用之前存入的 localstorage，把它取出來

使用 getItem()

let btn = document.querySelector('.btnClass');
let call = document.querySelector('.callClass');
function savename(e){
  // 撈出輸入鍵的值
 var text =document.querySelector('.textClass').value;
  // 存在Localstoreage
   localStorage.setItem('mylove', text);

}
btn.addEventListener('click',savename);
call.addEventListener('click',function(){
  // 撈出Localstoreage的值
var str = localStorage.getItem('mylove');
  alert(`my farovite is ${str}`);
});

localStorage 需要注意的地方

我們可以透過 Storage 方法，輕鬆的將資料儲存在本地端，但是實際應用之後，我們會發現我們要儲存的資料 value，全部被轉成字串格式

非常重要非常重要！！！！

資料儲存的格式 key 和 value 都只能接受「字串 」，若
儲存的資料非字串 — 陣列或物件 — 在儲存時會被轉成字串格式

1.將 array 轉為 string

將資料轉為 JSON 格式的字串。

JSON.stringify()

2.將 sring 轉為 array

將資料由 JSON 格式字串轉回原本的資料內容及型別。

JSON.parse( )

學以上兩點是因為 localstorage 只會保存 string 資料

原因如下：

var country = [
  {farmer :'卡四伯'}
];

localStorage.setItem('mynume', country);
var getDate = localStorage.getItem('mynume')
console.log(getDate[0].farmer);

console.log 結果會出現 undefined
 使用 typeof() 查值 會發現 是 string 而不是 array
因為 localStorage 只會自動轉成 string 內容

該如何變成陣列？

解決方法：將資料轉換成 JOSN 格式的字串

透過 JSON.stringify() 方法，將要儲存的資料轉換為 JSON 格式的字串

var country = [
  {farmer :'卡四伯'}
];
var countryString = JSON.stringify(country);
console.log(countryString);
localStorage.setItem('mynume',countryString);

到 Application Panel 查看儲存的資料內容，可以發現這次的格式和預期的相同：

當我們要取出資料時，使用 JSON.parse() 方法，將資料轉換回原本的格式：

var country = [
  {farmer :'卡四伯'}
];
var countryString = JSON.stringify(country);
console.log(countryString);
localStorage.setItem('mynume',countryString);

var getData = localStorage.getItem('mynume');
var getDataAry = JSON.parse(getData); 
console.log(getDataAry[0].farmer);

範例網址:https://codepen.io/chiakilalala/pen/NWPLxpQ

3. dataset、array 運用

範例網址

• 第一步驟:因為使用 queryselector 綁定,所以只能得到一個 li 回應
• . 該如何在 JS 中動態的去綁定 HTML 標籤元素(以去綁定a、li等等)
  但如果使用太多 queryselector 各別綁定會導致效能很差
• . 針對鎖定的 li 部分下此指令 if(num !=="LI"){return} ,以作為一個中斷點

4.splice - 刪除 array 資料

splice() MDN介紹

範例網址

定義:

從 Array 中添加/刪除項目，回傳被刪除的項目。
 這裡我們先專注 刪除項目

對象：

可操控 Array

array.splice(start)
array.splice(start, deleteCount)
array.splice(start, deleteCount, item1, item2, ...)

例子

var array=[1,2,3,4,5];
    array.splice(3,2);
    console.log(array);
    //結果： 1 2 3

這些知識，為接下來要做的 todolist 有很大的關係，
為了資料格式的轉換能更上手，特此說明紀錄。

資料來源：
Array數組的 splice()方法之刪除、插入、替換
什麼是 HTML 5 中的資料屬性（data-* attribute）
JavaScript 入門篇 - 學徒的試煉 -關於 localStorage